// ANIMATIONS

$da: "data-animate*=";

// SLIDE IN

// from west
@-webkit-keyframes slide-in-from-west {
	0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

// from west
@-webkit-keyframes slide-in-from-east {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

// from north
@-webkit-keyframes slide-in-from-north {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

// from south
@-webkit-keyframes slide-in-from-south {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

// fade in
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// fade in
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

// NO
@-webkit-keyframes shake {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    -webkit-transform: translateX(7%);
  }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    -webkit-transform: translateX(-7%);
  }
  100% { -webkit-transform: translateX(0); }
}

@-webkit-keyframes spin-cw {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes spin-ccw {
  to { -webkit-transform: rotate(-1turn); }
}


// ANIMATION OPTIONS
.animated {
  -webkit-animation-duration: 700ms;
  // -webkit-animation-fill-mode: forwards;

  // Animation Type
  &[#{$da}"slide-in-from-west"] { -webkit-animation-name: slide-in-from-west; }
  &[#{$da}"slide-in-from-east"] { -webkit-animation-name: slide-in-from-east; }
  &[#{$da}"slide-in-from-north"] { -webkit-animation-name: slide-in-from-north; }
  &[#{$da}"slide-in-from-south"] { -webkit-animation-name: slide-in-from-south; }
  &[#{$da}"fade-in"] { -webkit-animation-name: fade-in; }
  &[#{$da}"fade-out"] { -webkit-animation-name: fade-out; }
  &[#{$da}"shake"] { -webkit-animation-name: shake; }
  &[#{$da}"spin-cw"] { -webkit-animation-name: spin-cw; }
  &[#{$da}"spin-ccw"] { -webkit-animation-name: spin-ccw; }

  // Speed Modifiers
  &[#{$da}"slow"] { -webkit-animation-duration: 1.5s; }
  &[#{$da}"fast"] { -webkit-animation-duration: 300ms; }

  // Timing Function Modifiers
  &[#{$da}"ease"]          { -webkit-animation-timing-function: ease; }
  &[#{$da}"ease-in"]       { -webkit-animation-timing-function: ease-in; }
  &[#{$da}"ease-out"]      { -webkit-animation-timing-function: ease-out; }
  &[#{$da}"ease-in-out" ]  { -webkit-animation-timing-function: ease-in-out; }
  &[#{$da}"linear"]        { -webkit-animation-timing-function: linear; }

  // Iteration Modifiers
  &[#{$da}"infinite"]          { -webkit-animation-iteration-count: infinite; }  

  // Fill Mode Modifiers


}

// Slide Out
// @-webkit-keyframes slide-out {
// 	0% {
//     -webkit-transform: translateX(0);
//   }

//   100% {
//   	opacity: 0;
//     -webkit-transform: translateX(400px);
//   }
// }

// .slide-out { 
// 	-webkit-animation: slide-out 1s 1;
// }

// Flip In 
// @-webkit-keyframes flip-in {
// 	 0% {
//     -webkit-transform: perspective(700px) rotateY(-90deg);
//     opacity: 0;
//   }

//   100% {
//     -webkit-transform: perspective(700px) rotateY(0deg);
//     opacity: 1;
//   }

// }

// .flip-in { 
// 	-webkit-animation: flip-in 1s 1;
// }

// Flip Out
// @-webkit-keyframes flip-out {
// 	0% {
//     -webkit-transform: perspective(700px) rotateY(0deg);
//     opacity: 1;
//   }

//   100% {
//     -webkit-transform: perspective(700px) rotateY(90deg);
//     opacity: 0;
//   }

// }

// .flip-out { 
// 	-webkit-backface-visibility: visible;
// 	-webkit-animation: flip-out 1s 1;
// }

// Hinge In 
// @-webkit-keyframes hinge-in {
// 	 0% {
//     -webkit-transform: perspective(700px) rotateY(-90deg);
//     opacity: 0;
//   }

//   100% {
//     -webkit-transform: perspective(700px) rotateY(0deg);
//     opacity: 1;
//   }

// }

// .hinge-in { 
// 	-webkit-transform-origin: left;
// 	-webkit-animation: hinge-in 1s 1;
// }

// Hinge Out 
// @-webkit-keyframes hinge-out {
// 	 0% {
//     -webkit-transform: perspective(700px) rotateY(0deg);
//     opacity: 1;
//   }

//   100% {
//     -webkit-transform: perspective(700px) rotateY(90deg);
//     opacity: 0;
//   }

// }

// .hinge-out { 
// 	-webkit-backface-visibility: visible;
// 	-webkit-transform-origin: left;
// 	-webkit-animation: hinge-out 1s 1;
// }

// Fade In
// @-webkit-keyframes fade-in {
// 	0% {
//     opacity: 0;
//   }

//   100% {
//     opacity: 1;
//   }

// }

// .fade-in { 
// 	-webkit-animation: fade-in 1s 1;
// }

// Fade Out
// @-webkit-keyframes fade-out {
// 	0% {
//     opacity: 1;
//   }

//   100% {
//     opacity: 0;
//   }
// }

// .fade-out { 
// 	-webkit-animation: fade-out 500ms 1;
// }


// Scale In
// @-webkit-keyframes scale-in {
// 	0% {
//     -webkit-transform: scale(1.5);
//     opacity: 0;
//   }

//   100% {
//     -webkit-transform: scale(1);
//     opacity: 1;
//   }

// }

// .scale-in { 
// 	-webkit-backface-visibility: visible;
// 	-webkit-animation: scale-in 1s 1;
// }

// Scale Out
// @-webkit-keyframes scale-out {
// 	0% {
//     -webkit-transform: scale(1);
//     opacity: 1;
//   }

//   100% {
//     -webkit-transform: scale(1.5);
//     opacity: 0;
//   }

// }

// .scale-out { 
// 	-webkit-backface-visibility: visible;
// 	-webkit-animation: scale-out 500ms 1;
// }